<template>
  <ToolBar>
    <div>
      <el-button type="primary" size="small" @click="showEditDialog = true"
        >编辑添加，字段各种规则验证示例</el-button
      >
      <el-button type="primary" size="small" @click="exportTable"
        >本地导出表格</el-button
      >
    </div>
    <div>
      <el-input
        placeholder="请输入文章标题"
        size="small"
        style="width: 140px"
        v-model="params.Search.BusinessNo"
        clearable
      ></el-input>
      <el-select
        v-model="params.Search.BusinessNo"
        clearable
        style="width: 140px"
        placeholder="请选择类型"
        size="small"
      >
        <el-option label="招聘信息" value="1"></el-option>
        <el-option label="技术交流" value="2"></el-option>
      </el-select>
      <el-button type="success" size="small" @click="refresh()">查询</el-button>
      <el-button type="warning" size="small" @click="clearSearchParams()"
        >重置</el-button
      >
    </div>
  </ToolBar>
  <Table :params="tableParams">
    <template v-slot:last>
      <el-table-column slot:last fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </template>
  </Table>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import Table, {
  ColumnProperty,
  TableSetupData,
  defaultTableSetupData,
} from "@/components/Table.vue";
import request, { PageSearchRequest, ResponseData } from "@/utils/http-client";
import { Case_List, Case_Columns, CaseListRequest } from "@/services/case";
export default defineComponent({
  name: "CaseIndex",
  components: {
    Table,
  },
  methods: {
    handleClick(row: any) {
      console.log(row);
    },
  },
  setup() {
    // table属性
    //const tableParams = ref<TableSetupData>(defaultTableSetupData());
    let defaultTableParams = defaultTableSetupData();
    defaultTableParams.selection = true;
    defaultTableParams.selectionFixed = true;
    const tableParams = reactive<TableSetupData>(defaultTableParams);
    // 搜索参数
    //const params = ref<PageSearchRequest<CaseListRequest>>({ PageIndex:1, PageSize: 20});
    const params = reactive<PageSearchRequest<CaseListRequest>>({
      PageIndex: 1,
      PageSize: 20,
      Search: {
        TableId: 0,
        Id: 0,
        BusinessNo: "",
        ContractNo: "",
        CustomerID: "",
        FullText: "",
      },
    });
    let ajaxCount = 2;
    tableParams.loading = true;
    Case_Columns({}).then((response: ResponseData) => {
      if (response.Success) {
        tableParams.columns = response.Data;
      }
      ajaxCount--;
      tableParams.loading = ajaxCount == 0 ? false : true;
    });

    Case_List(params).then((response: ResponseData) => {
      if (response.Success) {
        tableParams.data = response.Data.Rows;
        tableParams.total = response.Data.Total;
      }
      ajaxCount--;
      tableParams.loading = ajaxCount == 0 ? false : true;
    });

    return { params, tableParams };
  },
});
</script>
<style scoped lang="scss">
</style>